import { ITypeState } from '@/models/typeModel';
import { IInterview } from '@/types/interview';
import { typeOptionCreator } from '@/utils/tools';
import '@toast-ui/editor/dist/i18n/zh-cn';
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';
import { Button, Form, Input, Select } from 'antd';
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'umi';

interface IProps {
  type: 'add' | 'edit';
  interviewInfo?: IInterview;
  handleSubmit: (value: any) => void;
}

const InterviewForm: React.FC<IProps> = ({
  type,
  interviewInfo,
  handleSubmit,
}: IProps) => {
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  const editorRef = useRef<any>();
  // const [firstIn, setFirstIn] = useState(true);
  // 从仓库获取类型列表
  const { typeList }: ITypeState = useSelector((state: any) => state.type);

  // if (type === 'edit') {
  //   if (formRef.current && firstIn) {
  //     setFirstIn(false);
  //     editorRef.current.getInstance().setHTML(interviewInfo?.interviewContent);
  //   }
  //   if (formRef.current) {
  //     formRef.current.setFieldsValue(interviewInfo);
  //   }
  // }

  /**
   * 首先获取 md 编辑器中的内容，然后再手动触发 handleSubmit
   */
  function handleFinish(value: any) {
    const interviewContent = editorRef.current.getInstance().getHTML();
    handleSubmit({ ...value, interviewContent });
  }

  // 这里需要注意的就是关于有 markdown 编辑器时数据的回填
  useEffect(() => {
    form.resetFields();
    form.setFieldsValue(interviewInfo);
    // 对应的组件在重新渲染时，markdown 编辑器回填了数据多次，覆盖了要回填的bookIntro
    // 这里用异步回填来解决
    setTimeout(() => {
      editorRef.current.getInstance().setHTML(interviewInfo?.interviewContent);
    }, 100);
  }, [interviewInfo]);
  useEffect(() => {
    if (!typeList.length) {
      dispatch({
        type: 'type/_initTypeList',
      });
    }
  }, []);
  useEffect(() => {
    // 如果类型列表为空，则初始化一次
    if (!typeList.length) {
      dispatch({
        type: 'type/_initTypeList',
      });
    }
  }, []);

  return (
    <Form
      name="basic"
      form={form}
      initialValues={{ ...interviewInfo }}
      autoComplete="off"
      onFinish={handleFinish}
    >
      {/* 面试题标题 */}
      <Form.Item
        label="题目标题"
        name="interviewTitle"
        rules={[{ required: true, message: '请输入题目标题' }]}
      >
        <Input placeholder="填写题目标题" />
      </Form.Item>

      {/* 面试题所属分类 */}
      <Form.Item
        label="题目分类"
        name="typeId"
        rules={[{ required: true, message: '请选择题目所属分类' }]}
      >
        <Select style={{ width: 200 }}>
          {typeOptionCreator(Select, typeList)}
        </Select>
      </Form.Item>

      {/* 面试题解答 */}
      <Form.Item
        label="题目内容"
        name="interviewContent"
        // rules={[{ required: true, message: '请输入题目内容' }]}
      >
        <Editor
          initialValue=""
          previewStyle="vertical"
          height="600px"
          initialEditType="markdown"
          useCommandShortcut={true}
          language="zh-CN"
          ref={editorRef}
        />
      </Form.Item>

      {/* 确认修改按钮 */}
      <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
        <Button type="primary" htmlType="submit">
          {type === 'add' ? '确认新增' : '修改'}
        </Button>

        <Button type="link" htmlType="reset" className="resetBtn">
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};

export default InterviewForm;
